<template>
  <input v-model="text" />
</template>

<script setup lang="ts">
import { watch, ref, isRef, computed, unref } from 'vue';

/**
 * 补全以下函数来实现防抖ref :
*/
function useDebouncedRef(value, delay = 1200) {
  const rawValueRef = ref(unref(value))
  let timerId
  return computed({
    get: () => rawValueRef.value,
    set: (newValue) => {
      clearTimeout(timerId)
      timerId = setTimeout(() => rawValueRef.value = newValue, delay)
    }
  })
}
const text = useDebouncedRef("hello")

/**
 * 确保在输入框快速输入时, 只触发一次回调。
*/
watch(text, (value) => {
  console.log(value)
})
</script>